<html>
<head>
  <meta charset="UTF-8">
  <title>Document</title>
  <link href="../../css/style.css" rel="stylesheet">
  <style type="text/css">
    .odda {
      background-color: red;
    }

    .oddb {
      background-color: green;
    }
  </style>
</head>
</head>
<body>
<div id="app">
  <h3>游戏列表</h3>
  <h4 v-if="seen">最新发布游戏</h4>
  <ol>
    <li v-for="(game,index) in games" :class="index%2==0?'oddb':'odda'">{{game.title}}/{{game.price}}</li>
  </ol>
</div>
<!-- 1:引包 -->
<script type="text/javascript" src="../../node_modules/vue/dist/vue.js"></script>
<script type="text/javascript">
  new Vue({
    el: "#app",
    data:function() {
	return{
      seen: true,
      games: [
        {
          title: '勇者斗恶龙'
          , price: 400
          ,myclass: 'odda'
        }
        , {
          title: '超级马里奥'
          , price: 380
          ,myclass: 'oddb'
        }
        , {
          title: '我的世界'
          , price: 99
          ,myclass: 'odda'
        }
      ]
    }
	}
  })
</script>

</body>
</html>
